<template>
    <div>
       <p>订单测试页面</p>
      <el-form   :model="orderForm"  >
        <el-form-item label="订单编号">
          <el-input v-model="orderForm.orderNum" ></el-input>
        </el-form-item>
        <el-form-item label="订单金额">
          <el-input v-model="orderForm.orderPrice" ></el-input>
        </el-form-item>
        <el-form-item label="订单名称">
          <el-input v-model="orderForm.orderName" ></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="orderForm.productDescription" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button  @click="doPay">支付</el-button>
        </el-form-item>
      </el-form>

    </div>
</template>

<script>
    export default {
      data() {
        return {
          orderForm:{
            orderNum:"",
            orderPrice:0,
            orderName:"",
            productDescription:""
          }
        }
      },

      methods:{
        doPay(){
          let url = "pay/alipay";
          this.$axios.put(url,this.orderForm).then(res=>{
        if (res.data.code == 200){
            const divForm = document.getElementsByTagName("div");
         if (divForm.length) {
           document.body.removeChild(divForm[0]);
         }
              const div = document.createElement("div");
              div.innerHTML = res.data.data; // data就是接口返回的form 表单字符串
              document.body.appendChild(div);
              document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
              document.forms[0].submit();
              window.close();//本窗口页面关闭
            }else {
              this.$message({
                type:"error",
                message:res.data.msg,
                duration:1000
              })
            }

          });
        }

      },
      created() {

      }
    }
</script>

<style scoped>

</style>